<template>
	<view class="container">
		<view class="cell flex-ac flex-b">
			<view>空闲时间超多少小时预警</view>
			<view class="flex-ac">
				<input type="number" v-model="num" placeholder="请输入" />
				<view>小时</view>
			</view>
		</view>
		<view class="foot">
			<view class="btnBox flex-ac">
				<view class="btn-1 middle" @click="sure">确定</view>
			</view>
			<x-botSpace></x-botSpace>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				num: ''
			}
		},
		onLoad(opt) {
			if(opt) console.log('opt:', opt)
			this.getHours()
		},
		methods: {
			sure(){
				if(this.num === '') return this.$Toast.message('请输入时间')
				this.$Net.post("/car/saveWarningDuration",{
					duration: parseInt(this.num)
				}).then(res=>{
					console.log('res:', res)
					this.$Toast.messageIcon('操作成功')
				})
			},
			getHours(){
				this.$Net.get('/car/getWarningDuration').then(res=>{
					console.log('res')
					this.num = res.data
				})
			}
		}
	}
</script>

<style lang="scss">
	page{ background-color: #fff; }
</style>

<style lang="scss" scoped>
	// @import './style.scss';
	.cell{
		width: 100%;
		height: 120rpx;
		border-bottom: 1rpx solid #f7f7f7;
		border-top: 1rpx solid #f7f7f7;
		padding: 0 20rpx;
		input{
			text-align: right;
			padding-right: 20rpx;
		}
	}
	.foot {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		padding: 30rpx;
	
		.btnBox {
			width: 100%;
	
			.btn-1 {
				flex: 1;
				height: 90rpx;
				background: #1684FC;
				border-radius: 10rpx;
				color: #ffffff;
				font-size: 34rpx;
			}
	
			.btn-2 {
				flex: 1;
				height: 90rpx;
				border: 1px solid #1684FC;
				border-radius: 10rpx;
				color: #1684FC;
				font-size: 34rpx;
			}
		}
	}
</style>
